<template>
  <div class="article-detail">
    <Header />
    <div class="container">
      <article>
        <h1>{{ article.title }}</h1>
        <div class="meta">
          <span>发布时间：{{ article.createdAt }}</span>
        </div>
        <div class="content">
          <p>{{ article.content }}</p>
        </div>
      </article>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import Header from '@/components/Header.vue';

const route = useRoute();
const articleId = route.params.id;

// 模拟文章数据（实际应从API获取）
const article = ref({
  id: 1,
  title: "Vue3 组件通信最佳实践",
  createdAt: "2025-05-16",
  content: "在Vue3中，组件通信是构建复杂应用的核心部分。本文将详细介绍props、emit、provide/inject等多种通信方式的使用场景和最佳实践..."
});
</script>

<style scoped>
.article-detail {
  min-height: 100vh;
  background-color: #f5f7fa;
}

.container {
  max-width: 800px;
  margin: 2rem auto;
  padding: 0 2rem;
}

article {
  background-color: white;
  border-radius: 15px;
  padding: 3rem;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

h1 {
  color: #1976D2;
  margin-bottom: 1rem;
  font-family: 'Comic Sans MS', cursive, sans-serif;
}

.meta {
  color: #666;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #eee;
}

.content {
  line-height: 1.8;
  color: #333;
}
</style>